<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
    <title>PlotOL V1.0.1</title>
    <link rel="stylesheet" href="../dist/ol.css">
    <link rel="stylesheet" href="../dist/plottingol.css">
    <link rel="stylesheet" href="css/defaults.css">
</head>
<body onload="init()">
<div id="map"></div>
<div id="header">
    <div id="logoandtitle">PlotOL动态标绘演示系统（已支持移动端） V1.0.1（for OL6）参考原作者基于OL3博客https://blog.csdn.net/gispace<span id="updateLabel" onclick="showUpdate()">更新记录</span> <span id="aboutLabel" onclick="showAbout()">关 于</span></div>
    <div id="version">— powered by PlotOL API V1.0.1 for OL6</div>
</div>
<div id="menu">
    <div>
        点标
        <button type="button" onclick="activate(POL.PlotTypes.MARKER)">点</button>
    </div>
    <div>
        线标
        <button type="button" onclick="activate(POL.PlotTypes.ARC)">弧线</button>
        <button type="button" onclick="activate(POL.PlotTypes.CURVE)">曲线</button>
        <button type="button" onclick="activate(POL.PlotTypes.POLYLINE)">折线</button>
        <button type="button" onclick="activate(POL.PlotTypes.FREEHAND_LINE)">自由线</button>
    </div>
    <div>
        面标
        <button type="button" onclick="activate(POL.PlotTypes.CIRCLE)">圆</button>
        <button type="button" onclick="activate(POL.PlotTypes.ELLIPSE)">椭圆</button>
        <button type="button" onclick="activate(POL.PlotTypes.LUNE)">弓形</button>
        <button type="button" onclick="activate(POL.PlotTypes.SECTOR)">扇形</button>
        <button type="button" onclick="activate(POL.PlotTypes.CLOSED_CURVE)">曲线面</button>
        <button type="button" onclick="activate(POL.PlotTypes.POLYGON)">多边形</button>
        <button type="button" onclick="activate(POL.PlotTypes.RECTANGLE)">矩形</button>
        <button type="button" onclick="activate(POL.PlotTypes.FREEHAND_POLYGON)">自由面</button>
        <button type="button" onclick="activate(POL.PlotTypes.GATHERING_PLACE)">聚集地</button>
    </div>
    <div>
        箭头
        <button type="button" onclick="activate(POL.PlotTypes.DOUBLE_ARROW)">钳击</button>
        <button type="button" onclick="activate(POL.PlotTypes.STRAIGHT_ARROW)">直箭头</button>
        <button type="button" onclick="activate(POL.PlotTypes.FINE_ARROW)">细直箭头</button>
        <button type="button" onclick="activate(POL.PlotTypes.ASSAULT_DIRECTION)">突击方向</button>
        <button type="button" onclick="activate(POL.PlotTypes.ATTACK_ARROW)">进攻方向</button>
        <button type="button" onclick="activate(POL.PlotTypes.TAILED_ATTACK_ARROW)">进攻方向（尾）</button>
        <button type="button" onclick="activate(POL.PlotTypes.SQUAD_COMBAT)">分队战斗行动</button>
        <button type="button" onclick="activate(POL.PlotTypes.TAILED_SQUAD_COMBAT)">分队战斗行动（尾）</button>
    </div>
    <div>
        操作
        <button type="button" onclick="plotOperator('moveUp')">上移</button>
		<button type="button" onclick="plotOperator('moveDown')">下移</button>
		<button type="button" onclick="plotOperator('setToTop')">置顶</button>
		<button type="button" onclick="plotOperator('setToBottom')">置底</button>
        <button type="button" onclick="plotOperator('clearFeatures',true)">全部清除</button>
        <button type="button" onclick="setPlotActive(false)">屏蔽点击</button>
        <button type="button" onclick="setPlotActive(true)">激活点击</button>
        
    </div>
    <div>
        添加属性
        <input placeholder="输入key" id="attr-input-key"></input>
		<input placeholder="输入value" id="attr-input-value"></input>
		<button type="button" onclick="addAttribute()">添加属性</button>
		
    </div>
    <div>
        样式
		<input id="style-input"></input>
		<button type="button" onclick="setStyle()">设置样式</button>
		<div id='property-show'>

		</div>
    </div>
</div>
<div id="aboutContainer"  class = "show-container">
    <div id="aboutTitle" class = "show-Title">关于...<span id="closeBtn" onclick="hideAbout()">X</span></div>
    <div id="aboutContent" class = "show-Content">
        <p class="aboutText">伴随着全国信息化进程的不断推进，以GIS为基础的动态标绘、资源部署、情报展示、应急指挥等可视化动态图形展示在应急、军事、海洋、地震、民政等行业得到越来越多的应用。标绘已经成为一种新的数据表达方式。</p>
        <p class="aboutText">PlotOL是GISpace动态标绘的OpenLayers6版本，旨在为基于开源GIS技术的项目提供标绘API>ArcGIS Flex版本</a>）。当前版本实现了常用符号的绘制，下一版本将实现符号编辑、序列化和反序列化。</p>
        <p class="aboutText">欢迎使用和反馈，开发者：@追逐丶 （QQ：576981389） 博客：https://blog.csdn.net/qq_29722281 </p>
        <p class="aboutText">参考作者博客https://blog.csdn.net/gispace 作者是基于ol3。我将其改装为ol6,并且封装了一层</p>
    
    </div>
</div>
<div id="updateContainer"  class = "show-container">
    <div id="aboutTitle" class = "show-Title">更新记录<span id="closeBtn" onclick="hideUpdate()">X</span></div>
    <div id="aboutContent" class = "show-Content">
        <p class="aboutText">2019-07-27 :初版提交</p>
        <p class="aboutText">2019-08-01 :</p>
        
        <p class="aboutText">1 全面支持移动端</p>
        <p class="aboutText">2 新增图元层级操作</p>
        <p class="aboutText">3 新增样式，属性编辑</p>
        <p class="aboutText">4 实现序列化，可以按照自己的服务器存储格式修改序列号代码，实现保存和加载.参加</p>
        
        <p class="aboutText">2019-08-05 :</p>

        <p class="aboutText">1 增加文档工具，生成API文档（需要重新install才可以使用）npm run docs</p>
        <p class="aboutText">2 标绘图元新增disable,enable方法</p>
        <p class="aboutText">3 新增TrackingLayer类，可以用来绘制轨迹。POL.TrackingLayer</p>

        <p class="aboutText">2019-12-06 :</p>
        <p class="aboutText">IE 支持 通过 npm run build-ie  再在应用html中引入 dist/polyfill.js 可以支持ie</p>
      
    </div>
</div>
<div id="delete-wrapper">
    <div id="btn-delete" style="display:none;">删 除</div>
</div>
<!-- <script src="js/ol.js"></script> -->
<!-- <script src="js/p-ol3.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- 不需支持IE可以去掉-->
<script src="../dist/polyfill.js"></script>
<script src="../dist/plottingol.js"></script>
<script src="js/app.js"></script>
</body>
</html>